<template>
  <div class="topic">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input v-model="formInline.user" placeholder="专题名称"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onAdd">添加</el-button>
      </el-form-item>
    </el-form>

    <!-- 内容 -->
    <el-table :data="TopicLists" border style="width: 100%">
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="title" label="主标题"> </el-table-column>
      <el-table-column prop="price_info" label="起步价格"> </el-table-column>

      <el-table-column prop="is_show" label="显示">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.is_new == 1 ? "是" : "否"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="id">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleEditTopic(`${scope.row.id}`)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.count"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getTopicLists } from "../../request/httpApi";
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      //商品列表数据
      TopicLists: [],
      //分页
      currentPage1: 1,
      //EditTopic.vue
      sizenum: "",
      pagenum: "",
      data: {},
    };
  },
  methods: {
    //编辑
    handleEditTopic(val) {
        // console.log(val);
        // this.$router.push("/editTopic/" + val);
      this.$router.push("/editTopic/"+val);
    },
    TopicListsinfo(page, size, name) {
      getTopicLists({
        page,
        size,
        name,
      }).then((res) => {
        //   console.log(res);
        if (res.errno == 0) {
    
          this.TopicLists = res.data.data;
          this.data = res.data;
        }
      });
    },
    //分页1
    handleSizeChange(val) {
      this.sizenum = val;
      //   this.getAjax()
      this.TopicListsinfo(val, this.pagenum);
    },
    //分页2
    handleCurrentChange(val) {
      this.pagenum = val;
      this.TopicListsinfo(val, this.sizenum);
    },
    //搜索
    onSearch() {
      console.log(this.formInline.user);
      this.TopicListsinfo(this.pagenum, this.sizenum, this.formInline.user);
    },
    //添加
    onAdd() {
      // console.log();
      this.$router.push('/addtopic')

    },
  },
  created() {
    this.TopicListsinfo(1, 10);
  },
};
</script>
 
<style lang = "less" scoped>
.topic {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #fff;
  .paging {
    padding-top: 10px;
    padding-bottom: 10px;
    float: right;
  }
}
</style>

